<template>
  <div>

    <el-form :inline="true" :model="state.queryForm" @keyup.enter="getDataList()">
      <el-form-item>
        <el-input v-model="state.queryForm.tableName" placeholder="表名"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button @click="getDataList()">查询</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="createCode()">字典</el-button>
      </el-form-item>
      <!-- <el-form-item>
         <el-button type="primary" @click="gencode(state.queryForm.tableName)">生成代码</el-button>
       </el-form-item>-->
      <el-form-item>
        <el-button type="danger" @click="gencode( )">直接生成代码</el-button>
      </el-form-item>
    </el-form>
    <el-table v-loading="state.dataListLoading" :data="state.dataList" border style="width: 100%"
              @selection-change="selectionChangeHandle">
      <el-table-column type="selection" header-align="center" width="50"></el-table-column>

      <el-table-column prop="engine" label="表名" header-align="center" align="center" width="300">
        <template #default="scope">
          <el-link prop="engine" @click="dictInfo(scope.row.engine)" target='_blank' underline='false'>
            {{ scope.row.engine }}
          </el-link>
        </template>
      </el-table-column>
      <el-table-column prop="tablename" label="表说明" header-align="center" align="center"></el-table-column>
      <el-table-column prop="createtime" label="创建时间" header-align="center" align="center"></el-table-column>
      <el-table-column prop="tabletype" label="类型(表/视图)" header-align="center" align="center"
                       width="150"></el-table-column>
      <el-table-column label="操作" fixed="right" header-align="center" align="center" width="150">
        <template #default="scope">
          <el-button type="primary" size="small" @click="generator(scope.row.engine)">生成代码</el-button>
        </template>
      </el-table-column>
    </el-table>

    <import ref="importRef" @refreshDataList="getDataList"></import>
  </div>
  <div>
    <el-pagination
        :current-page="state.page"
        :page-sizes="state.pageSizes"
        :page-size="state.limit"
        :total="state.total"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="sizeChangeHandle"
        @current-change="currentChangeHandle"
    ></el-pagination>
  </div>
</template>

<!--:current-page="state.currPage"-->
<!--:page-sizes="state.totalPage"-->
<!--:page-size="state.currPage"-->
<!--:total="state.totalCount"-->
<script setup lang="ts" name="DataSource">
import {reactive} from 'vue'
import {IHooksOptions} from '@/hooks/interface'
import {useCrud} from '@/hooks'
import {ElMessage} from "element-plus/es";
import {create, dictColumns, optGenerator} from "@/api/dict";

const state: IHooksOptions = reactive({
  dataListUrl: '/sys/generator/list',
  // dataListUrl: '/gen/table/page',
  queryForm: {tableName: ''}
})

const createCode = function () {
  var json = "{\"table\":{\"name\":\"hr_salary_data\",\"child\":[{\"table\":{\"name\":\"hr_salary_data_details\"}}]}}";
  create(json).then((result: any) => {
    console.log("生成代码...");
    console.log(result);
    ElMessage.success(result.msg)
  });
}
const generator = function (tableName ?: any) {
  optGenerator(tableName).then((result: any) => {
    console.log("生成代码...");
    console.log(result);
    ElMessage.success(result.msg)
  });
}

const gencode = function (tableName ?: any) {
  optGenerator(tableName).then((result: any) => {
    console.log("直接生成代码...");
    console.log(result);
    ElMessage.success(result.msg)
  });
}

function dictInfo(tableName?: any) {
  console.log(tableName);
  dictColumns(tableName).then((result: any) => {
    console.log("查看字段详情...");
    console.log(result);
    ElMessage.success(result.msg)
  });
}

// function dictionary(key?: number | string) {
//
//   console.log(key);
// // const dictionary =function (key?: number | string)  {
// // const dictionary = (key?: number | string) => {
//   debugger;
//   let data: any[] = []
//   if (key) {
//     data = [key]
//   } else {
//     data = state.dataListSelections ? state.dataListSelections : []
//
//     console.log(data);
//     if (data.length === 0) {
//       ElMessage.warning('请选择删除记录')
//       return
//     }
//     var subHtml: string;
//     var span = '<span class="ui-jqgrid-resize ui-jqgrid-resize-ltr" style="cursor: col-resize;">&nbsp;</span>';
//     var div = '<div class="ui-th-div ui-jqgrid-sortable">';
//
//     service.get(dictionaryUrl, {
//       params: {
//         table: "hr_salary_grant"
//       }
//     }).then((result: any) => {
//       console.log(result);
//       subHtml = '<table id="tablebc">' +
//           '<thead>' +
//           '<tr>' +
//           '<th class="thxh">' + span + ' </th>' +
//           '<th class="thbc1">' + span + '列名</th>' +
//           '<th class="thbc1">' + span + '备注</th>' +
//           '<th class="thbc2">' + span + '类型</th>' +
//           '<th class="thbc">' + span + '数据长度</th>' +
//           '<th class="thbc">' + span + '数据精度</th>' +
//           '<th class="thbc">' + span + '是否可空</th>' +
//           '<th class="thbc">' + span + '是否主键</th>' +
//           '</tr>' +
//           '</thead>' +
//           '<tbody>';
//       for (var i = 0; i < result.length; i++) {
//         var data = result[i];
//         subHtml += ('<tr class="jqgrow ui-row-ltr" >' +
//             '<td class="tdbc" id="index" style="text-align:center ">' + (i + 1) + '</td>' +
//             '<td class="tdbc" id="col_code" >' + data.col_code + '</td>' +
//             '<td class="tdbc" id="col_name"  ">' + data.col_name + '</td>' +
//             '<td class="tdbc" id="col_type"  ">' + data.col_type + '</td>' +
//             '<td class="tdbc" id="data_length"  ">' + data.data_length + '</td>' +
//             '<td class="tdbc" id="data_precision"  ">' + data.data_precision + '</td>' +
//             '<td class="tdbc" id="nullable"  ">' + data.nullable + '</td>' +
//             '<td class="tdbc" id="pk"  ">' + data.pk + '</td>' +
//             '</tr>');
//       }
//       subHtml += '</tbody> </table>';
//       console.log(subHtml);
//     })
//
//     // layer.use('layer', function () {
//     //   var layerui = layer.layer;
//     //   layerui.open({
//     //     type: 1,//页面层
//     //     title: ['字典详情', 'font-size:20px;background-color:pink;color:#fff'],
//     //     area: ['1000px', '450px', 'background-color:lightblue'],
//     //     fixed: false, //不固定
//     //     maxmin: true,//页面最大化和最小化
//     //     resize: false,
//     //     shadeClose: true,
//     //     anim: 6,//抖动
//     //     content: subHtml
//     //   });
//     // });
//   }
// }

const {getDataList, selectionChangeHandle, sizeChangeHandle, currentChangeHandle, deleteBatchHandle} = useCrud(state)
</script>
